<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		#d1{
			width: 300px;
			margin: 100px auto;
		}
		#d1>div{
			width: 300px;
			height: 200px;
			border: 1px solid;
			display: none;
		}
		#d1>button{
			width: 70px;
			height: 50px;
			border: none;
		}
		#d1>div.active{
			display:block;
		}
		#d1>button.active{
			background: #565656;
			color: white;
		}
	</style>
	<body>
		<div id="d1">
			<button class="active">按钮一</button>
			<button>按钮二</button>
			<button>按钮三</button>
			<div class="active">11111111</div>
			<div>2222222</div>
			<div>3333333</div>
		</div>
		
		<script type="text/javascript">
			
			window.onload = function(){
				var a1 = new Tab("#d1")
				a1.init()
			}
			function Tab(id){
				this.d1 = document.querySelector(id)
				this.but = this.d1.querySelectorAll("button")
				this.div = this.d1.querySelectorAll("div")
			}
			Tab.prototype.init = function () {
	            for(var i=0;i<this.but.length;i++){
	                this.but[i].index = i;
	                var This = this;
	                this.but[i].onclick = function () {
	                    This.changeTab(this)
	                }
	            }
	        }
			Tab.prototype.changeTab = function (oBtn){
	            for(var i=0;i<this.but.length;i++){
	                this.but[i].className = ""
	                this.div[i].style.display = "none"
	            }
	            oBtn.className = "active";
	            this.div[oBtn.index].style.display = "block"
	        }
			
		</script>
		
	</body>
</html>
